﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>我的相集</title>
	<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="/css/base.css"><!--演示页面样式，使用时可以不引用-->
	<link href="/css/photopile.css" rel="stylesheet">
	<link href="/css/demo.css" rel="stylesheet">
</head>
<body>

<div class="photopile-wrapper">
	<ul class="photopile" id="photopile"></ul>
</div>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/jquery.ui.touch-punch.min.js"></script>
<script src="/js/photopile.js"></script>

<script type="text/javascript">

	var imgArray = new Array();

    var socket;
	// 检测浏览器是否支持
    if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else {
        console.log("您的浏览器支持WebSocket");
        socket = new WebSocket("ws://192.168.1.22:8080/clientWebsocket");
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
            // 向服务器索取图片
            socket.send("1:");
        };
        //获得消息事件
        socket.onmessage = function (message) {
//            console.log(message);

            // 分解消息
            var msg = message.data.split(":");
            // 解析消息
            if (msg[0] == "success") {
                console.log("连接服务器成功")
			} else if (msg[0] == "msg"){
                console.log(msg[1]);
			} else if (msg[0] == "error") {
				console.error("服务器发生未知错误")
            }  else if (msg[0] == "imglist"){
                var lis = "";
                var imgNames = msg[1].split(",");
                for(var i = 0; i < imgNames.length; i++) {
                    lis += "<li><a href='" + msg[2] + imgNames[i] + "'><img src='" + msg[2] + imgNames[i] + "' width='133' height='100' /></a></li>";
                }
                $("#photopile").append(lis);
                PhotoPile().scatter();
			}

        };

        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误,未能连接服务器！");
        }

    }


</script>

</body>
</html>